<!DOCTYPE html>
<html>
<head>
	<title>商家联盟</title>
	<meta name="viewport" content="initial-scale=0.5, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"> 
	<!-- <link rel="stylesheet" type="text/css" href="css/mescroll.min.css">  -->
	<link rel="stylesheet" type="text/css" href="css/index.css"> 
</head>
<body class="">
	<div class="main">
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<div id="myView" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-left" @click="show = !show">
					<span v-html="city.area_name"></span>
					<span class="mui-icon mui-icon-arrowdown"></span>
				</button>
				<a href="#search" class="mui-title box-search">
					<span class="mui-icon mui-icon-search"></span>
					<span class="single-line">请输入商家名称</span>
				</a>
			</div>
			<section class="area-qu" v-show="show">
				<i class="text-icon icon-uparrow"></i>
				<div class="list" v-for="item in area" v-html="item.area_name" @click="changeArea(item.id)"></div>
			</section>
			<div class="mui-page-content" >
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="iscoll1">
						<div class="mui-slider" id="slider" v-show="slider.length>1">
							<div class="mui-slider-group mui-slider-loop">
								<div class="mui-slider-item mui-slider-item-duplicate" v-show="slider.length>1">
									<a href="#">
										<img  v-bind:src="slider[slider.length-1]">
									</a>
								</div>
								<div class="mui-slider-item" v-for="item in slider">
									<a href="#">
										<img v-bind:src="item">
									</a>
								</div>
								<div class="mui-slider-item mui-slider-item-duplicate" v-show="slider.length>1">
									<a href="#">
										<img v-bind:src="slider[0]">
									</a>
								</div>
							</div>
							<div class="mui-slider-indicator" v-show="slider.length>1">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator" v-for="item in indicator"></div>
							</div>
						</div>
						<ul class="mui-table-view mui-grid-view mui-grid-9">
				           	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" >
				           		<a  @click="tofenlei(1,'服饰')">
				                    <span class="mui-icon mui-icon-home"></span>
				                    <div class="mui-media-body">服饰</div>
			                    </a>
				            </li>
				           	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
				           		<a @click="tofenlei(2,'美食')">
				                   	<span class="mui-icon mui-icon-home"></span>
				                    <div class="mui-media-body">美食</div>
			                    </a>
				            </li>
				           	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
				           		<a @click="tofenlei(3,'居住')">
				                    <span class="mui-icon mui-icon-home"></span>
				                    <div class="mui-media-body">居住</div>
			                    </a>
				            </li>
				           	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
				           		<a @click="tofenlei(4,'出行')">
				                    <span class="mui-icon mui-icon-home"></span>
				                    <div class="mui-media-body">出行</div>
			                    </a>
				            </li>
				        </ul>
				        <div class="sort">
							<button @click="sort('create_time')">默认排序</button>
							<button @click="sort('business_hot')">人气最高</button>
						</div>
						<ul class="mui-table-view ">
							<li class="mui-table-view-cell mui-media nodata" v-show="business.length==0">
								没有数据
							</li>
							<li class="mui-table-view-cell mui-media" v-for="item in business">
								<a @click="todetail(item.id,'list')">
									<img class="mui-media-object mui-pull-left" v-bind:src="item.business_icon">
									<div class="mui-media-body">
										<span v-html="item.business_name"></span>
										<p class="desc" v-html="item.business_desc"></p>
										<p class="renqi">人气值：<span v-html="item.business_hot"></span></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>	
		</div>
		<div id="fenlei" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>返回
				</button>
				<h1 class="mui-center mui-title" v-html="typeTxt"></h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper" id="pullrefresh1">
					<div class="mui-scroll" id="iscoll2">
						<div class="sort">
							<button @click="sort('create_time')">默认排序</button>
							<button @click="sort('business_hot')">人气最高</button>
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-media nodata" v-show="fenleiList.length==0">
								没有数据
							</li>
							<li class="mui-table-view-cell mui-media" v-for="item in fenleiList">
								<a @click="todetail(item.id,'list')">                    
									<img class="mui-media-object mui-pull-left" v-bind:src="item.business_icon">
									<div class="mui-media-body">
										<span v-html="item.business_name"></span>
										<p class="desc" v-html="item.business_desc"></p>
										<p class="renqi">人气值：<span v-html="item.business_hot"></span></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="detail" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>返回
				</button>
				<h1 class="mui-center mui-title" v-html="detailInfo.business_name"></h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-slider" id="slider" v-show="infoImg.length>1">
							<div class="mui-slider-group mui-slider-loop">
								<div class="mui-slider-item mui-slider-item-duplicate" v-show="infoImg.length>1">
									<a href="#">
										<img  v-bind:src="infoImg[infoImg.length-1]">
									</a>
								</div>
								<div class="mui-slider-item" v-for="item in infoImg">
									<a href="#">
										<img v-bind:src="item">
									</a>
								</div>
								<div class="mui-slider-item mui-slider-item-duplicate" v-show="infoImg.length>1">
									<a href="#">
										<img v-bind:src="infoImg[0]">
									</a>
								</div>
							</div>
							<div class="mui-slider-indicator" v-show="infoImg.length>1">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator" v-for="item in infoImg_indicator"></div>
							</div>
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<span class="mui-icon mui-icon-location"></span>
								<span v-html="detailInfo.business_address"></span>
							</li>
							<li class="mui-table-view-cell">
								<span class="mui-icon mui-icon-phone"></span>
								<span v-html="detailInfo.business_phone"></span>
							</li>
							<li class="mui-table-view-cell">
								<h4>商家介绍</h4>
								<p v-html="detailInfo.business_desc"></p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="search" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>返回
				</button>
				<input class="mui-title box-search searchInput" placeholder="请输入商家名称" v-model="searchKey"/>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="search-box" v-show="historyList.length>0">
							<span class="mui-icon mui-icon-trash" @click="del"></span>
							<div class="list">
								<p>历史搜索</p>
								<span v-for="item in historyList" v-html="item.business_name" @click="todetail(item.id,'list')"></span>
							</div>
						</div>
						<div class="search-box">
							<div class="list">
								<p>热门搜索</p>
								<span v-for="item in hotList" v-html="item.business_name" @click="todetail(item.id,'list')"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="search-key" v-show="isSearch">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" v-for="item in searchList" v-show="searchList.length>=0">
							<a class="mui-navigate-right" @click="todetail(item.id,'search')">                    
								<img class="mui-media-object mui-pull-left" v-bind:src="item.business_icon">
								<div class="mui-media-body" v-html="item.business_name"></div>
							</a>
						</li>
					</ul>

				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="https://webimgs-1251124951.file.myqcloud.com/js/vue.v2.min.js"></script>
	<script type="text/javascript" src="https://webimgs-1251124951.file.myqcloud.com/js/jquery.min.js"></script>
	<script type="text/javascript" src="js/mui.view.js"></script>
	<script src="js/mui.pullToRefresh.js"></script>
	<script src="js/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html>